$(document).ready(function(){
    $(document).bind('deviceready', function(){
        //Phonegap ready
        onDeviceReady();
    });
    var output = $('#output');
    $.ajax({
        url: 'http://holamun-do-it.com/carta/datos.php?category=1',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        timeout: 5000,
        success: function(data, status){
            $.each(data, function(i,item){
               var landmark='<tr> <td align="center" colspan=2 style="width:100%; padding:2%;"> <table cellspacing=0 cellpadding=0 style="border-collapse=collapse"  width="100%"> <tr> <td> <img  src="@image" width="100%" height="180" /> </td> </tr> <tr> <td bgcolor="@color" style="width:100%; height:50;"> <table cellspacing=0 cellpadding=0 width="100%"> <tr> <td align="left" style="width:80%; padding:20px; color:white; font-weight:bold; font-family;arial; font-size:25px;">@name</td> <td align="right" style="width:20%; padding:15px;"><a href="http://www.google.com?idcat=@idcat"><img src="arrow.gif" width="35px" /></a></td> </tr> </table> </td> </tr> </table> </td> </tr>';
                landmark=landmark.replace('@image',item.imagecategory);
                landmark=landmark.replace('@color',item.colorcategory);
                landmark=landmark.replace('@idcat',item.idcategory);
                landmark=landmark.replace('@name',item.namecategory);
                output.append(landmark);
            }
);
        },
error: function(err, textStatus, errorThrown) {
                 output.text("There was an error [" + textStatus + "] loading the data.");
                 console.log(err);
                 console.log(errorThrown);
              } 
    });
    var category=0;
    var landmark;
    $.ajax({
        url: 'http://holamun-do-it.com/carta/datos.php',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        timeout: 5000,
        success: function(data, status){
            $.each(data, function(i,item){
               if (category == 0){
                  landmark='<tr>';
                  landmark= landmark +'<td align="center" style="width:50%; padding:2%;"> <table cellspacing=0 cellpadding=0 style="border-collapse=collapse"  width="100%"> <tr> <td> <img  src="@image" width="100%" height="90" /> </td> </tr> <tr> <td bgcolor="@color" style="width:100%; height:50;"> <table cellspacing=0 cellpadding=0 width="100%"> <tr> <td align="left" style="width:80%; padding:20px; color:white; font-weight:bold; font-family;arial; font-size:18px;">@name</td> <td align="right" style="width:20%; padding:15px;"><a href="http://www.google.com?idcat=@idcat"><img src="arrow.gif" width="35px" /></a></td> </tr> </table> </td> </tr> </table> </td>@end';
               }else{
               landmark= landmark +'<td align="center" style="width:50%; padding:2%;"> <table cellspacing=0 cellpadding=0 style="border-collapse=collapse"  width="100%"> <tr> <td> <img  src="@image" width="100%" height="90" /> </td> </tr> <tr> <td bgcolor="@color" style="width:100%; height:50;"> <table cellspacing=0 cellpadding=0 width="100%"> <tr> <td align="left" style="width:80%; padding:20px; color:white; font-weight:bold; font-family;arial; font-size:18px;">@name</td> <td align="right" style="width:20%; padding:15px;"><a href="http://www.google.com?idcat=@idcat"><img src="arrow.gif" width="35px" /></a></td> </tr> </table> </td> </tr> </table> </td>@end1';
               }
             
               
                landmark=landmark.replace('@image',item.imagecategory);
                landmark=landmark.replace('@color',item.colorcategory);
                landmark=landmark.replace('@idcat',item.idcategory);
                landmark=landmark.replace('@name',item.namecategory);
                
                 if (category == 1){
                    category=0;
                    landmark= landmark.replace('@end', '');
                    landmark= landmark.replace('@end1', '</tr>');
                    output.append(landmark);
                    landmark='';
               }
               category=category+1;
            }
            
);landmark= landmark.replace('@end', '<td></td></tr>');output.append(landmark);
        },
error: function(err, textStatus, errorThrown) {
                 output.text("There was an error [" + textStatus + "] loading the data.");
                 console.log(err);
                 console.log(errorThrown);
              } 
    });
});